<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery案例</title>
		<style>
			.pic {
				height: 500px;
				width: 500px;
				border: 4px solid rebeccapurple;
				border-radius: 50%;
				overflow: hidden;
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function() {
				$("div:has(a)").css({
					"border": "20px solid red",
					"height": "300px"
				});
				//点击的时候，调用里面的匿名函数
				//绑定的方式加事件。。。
				$("#btn").click(function() {
					$("#xiaoxifu").toggleClass("pic");
				});
				$("#btn2").click(function(){
					if($(".c1").prop("align")=="right")
						$(".c1").prop("align","left");
					else
						$(".c1").prop("align","right");
				});
				$("#btn3").click(function(){
					//隐藏了显示；显示时隐藏
					//this 是dom元素,当前按钮
					//核心函数有个功能就是把dom元素转换成jquery对象
					if($("#xiaoxifu img").is(":visible")){
						$("#xiaoxifu img").hide(4000);
						$(this).text("显示手机号");//!!!!
						///$("#btn3").text("显示手机号");
					}else{
						$("#xiaoxifu img").show(1400);
						$(this).text("隐藏手机号");
					}
						
				});
			});
		</script>
	</head>
	<body>
		
		<div>
			<a href="#">淘宝</a>
		</div>
		<div>
			<span>大扎好，你是渣渣灰</span>
		</div>
		<div id="xiaoxifu">
			<img src="../12-15/yuenan.jpg" />
		</div>
		<button type="button" id="btn">切换样式</button>
		<button type="button" id="btn2">h1左右切换</button>
		<button type="button" id="btn3">隐藏手机号</button>
		<h1 class="c1">We change lives</h1>
	</body>
</html>
